@use "sass:math";
@import '~/common/style/index.scss';
@import './mixin.scss';

$tooltip-prefix-cls: #{$cui-prefix}-tooltip;

$tooltip-arrow-shadow-width: 3px;
$tooltip-arrow-rotate-width: 22px;

$tooltip-arrow-offset-vertical: 5px; // 8 - 3px
$tooltip-arrow-offset-horizontal: 13px; // 16 - 3px

.#{$tooltip-prefix-cls} {

    position: absolute;
    z-index: $zindex-tooltip;
    display: block;
    width: auto;
    // width: intrinsic;
    // max-width: $tooltip-max-width;
    visibility: visible;

    &-content {
        position: relative;
    }
    
    &-hidden {
        display: none;
    }

    &-placement-top,
    &-placement-topLeft,
    &-placement-topRight {
        padding-bottom: $tooltip-distance;
    }

    &-placement-right,
    &-placement-rightTop,
    &-placement-rightBottom {
        padding-left: $tooltip-distance;
    }

    &-placement-bottom,
    &-placement-bottomLeft,
    &-placement-bottomRight {
        padding-top: $tooltip-distance;
    }

    &-placement-left,
    &-placement-leftTop,
    &-placement-leftBottom {
        padding-right: $tooltip-distance;
    }
    &-round{
        .#{$tooltip-prefix-cls}-inner{
            border-radius: 16px;
        }
    }
    // Wrapper for the tooltip content
    &-inner {
        min-width: 30px;
        min-height: 32px;
        padding: 6px 8px;
        color: $tooltip-color;
        text-align: left;
        text-decoration: none;
        word-wrap: break-word;
        background-color: $tooltip-bg;
        border-radius: $border-radius-base;
        box-shadow: $box-shadow-base;
        display: flex;
        align-items: center;
    }

    // Arrows
    &-arrow {
        position: absolute;
        z-index: 2;
        display: block;
        width: $tooltip-arrow-rotate-width;
        height: $tooltip-arrow-rotate-width;
        overflow: hidden;
        pointer-events: none;
        // top: -5px;
        // right: 0;
        // bottom: 0;
        // left: 0;
        // background-color: $gray-1;
        // transform: translateY(50%) translateX(-50%) rotate(45deg)!important;
        // z-index: 0;
        background: transparent;

        &-content{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            width: $tooltip-arrow-width;
            height: $tooltip-arrow-width;
            margin: auto;
            content: '';
            pointer-events: auto;
            background-color: $tooltip-bg;
            // background-color: $gray-1;
            @include roundedArrow($tooltip-arrow-width, 5px);
        }
    }

    &-placement-top &-arrow,
    &-placement-topLeft &-arrow,
    &-placement-topRight &-arrow {
        bottom: 0;
        transform: translateY(100%);

        &-content {
        box-shadow: $tooltip-arrow-shadow-width $tooltip-arrow-shadow-width 7px fade($black, 7%);
        transform: translateY(math.div(-$tooltip-arrow-rotate-width, 2)) rotate(45deg);
        }
    }

    &-placement-top &-arrow {
        left: 50%;
        transform: translateY(100%) translateX(-50%);
    }

    &-placement-topLeft &-arrow {
        left: $tooltip-arrow-offset-horizontal;
    }

    &-placement-topRight &-arrow {
        right: $tooltip-arrow-offset-horizontal;
    }

    &-placement-left &-arrow,
    &-placement-leftTop &-arrow,
    &-placement-leftBottom &-arrow {
        right: 0;
        transform: translateX(100%);

        &-content {
        box-shadow: $tooltip-arrow-shadow-width - $tooltip-arrow-shadow-width 7px fade($black, 7%);
        transform: translateX(math.div(-$tooltip-arrow-rotate-width, 2)) rotate(315deg);
        }
    }

    &-placement-left &-arrow {
        top: 50%;
        transform: translateX(100%) translateY(-50%);
    }

    &-placement-leftTop &-arrow {
        top: $tooltip-arrow-offset-vertical;
    }

    &-placement-leftBottom &-arrow {
        bottom: $tooltip-arrow-offset-vertical;
    }

    &-placement-bottom &-arrow,
    &-placement-bottomLeft &-arrow,
    &-placement-bottomRight &-arrow {
        top: 0;
        transform: translateY(-100%);

        &-content {
        box-shadow: - $tooltip-arrow-shadow-width - $tooltip-arrow-shadow-width 7px fade($black, 7%);
        transform: translateY(math.div($tooltip-arrow-rotate-width, 2)) rotate(225deg);
        }
    }

    &-placement-bottom &-arrow {
        left: 50%;
        transform: translateY(-100%) translateX(-50%);
    }

    &-placement-bottomLeft &-arrow {
        left: $tooltip-arrow-offset-horizontal;
    }

    &-placement-bottomRight &-arrow {
        right: $tooltip-arrow-offset-horizontal;
    }

    // arrow placement right
    &-placement-right &-arrow{
        top: 50%;
        transform: translate(-100%) translateY(-50%);
        left: 0;
    }
    &-placement-right &-arrow-content{
        box-shadow: 3px 3px 7px #00000012;
        transform: translate(11px) rotate(135deg);
    }

}

.#{$tooltip-prefix-cls}-dark{
    color: $gray-6;
    .#{$tooltip-prefix-cls}-inner {
        background-color: $gray-1;
        border: 1px solid $gray-2
    }

    .#{$tooltip-prefix-cls}-arrow {
        &-content {
            background-color: $gray-1;
        }
    }
}

@function sqrt($num) {
    $temp:1;
    @while abs($temp - $num / $temp) > 1e-6 {
        $temp: ($temp + $num/$temp) / 2;
    }
    @return $temp;
}